<template>
	<view class="store-style">
		<view class="store-style-tit"><text class="current">3</text><text class="pages">/3</text><text class="name">您喜欢的风格</text></view>
		<view class="store-style-list">
			<view class="store-style-item" v-for="(data,index) in styleList" :key="index" @click="chose(data.name)">
				<image :lazy-load="true" :src="data.image" mode="widthFix"></image>
				<view class="icon" v-if="formData.style===data.name"><u-icon name="checkbox-mark" size="24" color="#141414"></u-icon></view>
			</view>
		</view>
		<view class="prev" @click="prev">上一步</view>
		<view class="next"><view class="next-btn" @click="submit">提交</view></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:1,
					type: 2,
					city: '',
					house: '',
					sex: '',
					age: '',
					style: '',
					phone: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).phone:''
				},
				styleList: [{
					name: '现代简约',
					image: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/test/01.png'
				},{
					name: '精品实木',
					image: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/test/02.png'
				},{
					name: '现代中式',
					image: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/test/03.png'
				},{
					name: '经典美式',
					image: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/test/04.png'
				},{
					name: '自然北欧',
					image: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/test/05.png'
				},{
					name: '奢华欧法',
					image: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/test/06.png'
				},{
					name: '轻奢主义',
					image: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/test/07.png'
				},{
					name: '乡村田园',
					image: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/test/08.png'
				}]
			};
		},
		onLoad(options) {
			this.formData.city = JSON.parse(options.parameter).city
			this.formData.house = JSON.parse(options.parameter).house
			this.formData.sex = JSON.parse(options.parameter).gender
			this.formData.age = JSON.parse(options.parameter).age
		},
		methods: {
			chose(style){
				this.formData.style = style
			},
			prev(){
				uni.navigateBack({
					animationDuration: 500,
					delta: 1
				})
			},
			submit(){
				if(!this.formData.style){
					return uni.showToast({
						icon: 'none',
						title: '请选择您喜欢的风格'
					})
				}
				this.$u.api.StoreCustomer(this.formData).then(res => {
					uni.showToast({
						icon: 'none',
						title: '提交成功',
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack({
							animationDuration: 500,
							delta: 3
						})
					},1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	.store-style-tit{
		padding: 85rpx 0;
		font-size: 32rpx;
		color: #282220;
		font-weight: bold;
		.current{
			font-size: 52rpx;
			color: #282220;
			font-weight: bold;
		}
		.pages{
			margin-right: 30rpx;
		}
	}
	.store-style{
		padding: 0 30rpx 120rpx;
	}
	.store-style-list{
		display: flex;
		flex-wrap: wrap;
		.store-style-item{
			width: 330rpx;
			margin: 25rpx 28rpx 0 0;
			position: relative;
			.icon{
				position: absolute;
				background-color: #FFF;
				width: 36rpx;
				height: 36rpx;
				border-radius: 0 0 0 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				right: 0;
				top: 0;
			}
			&:nth-child(2n){
				margin-right: 0;
			}
			image{
				width: 100%;
			}
		}
	}
	.prev{
		position: fixed;
		bottom: 200rpx;
		left: 0;
		right: 0;
		text-align: center;
		text-decoration: underline;
		font-size: 28rpx;
		color: #444;
		z-index: 1;
	}
	.next{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFF;
		height: 120rpx;
		display: flex;
		align-items: center;
		border-top: solid 2rpx #F4F4F4;
		z-index: 1;
		.next-btn{
			height: 90rpx;
			line-height: 90rpx;
			background: #141414;
			border-radius: 8rpx;
			margin: 0 75rpx;
			color: #FFF;
			font-size: 32rpx;
			flex: 1;
			text-align: center;
		}
	}
</style>
